import 'package:pacsun/theme/app_Colors.dart';
import 'package:pacsun/view/create/become/component/LikeContainer.dart';
import 'package:pacsun/view/create/become/component/ProfileAvatar.dart';
import 'package:pacsun/view/create/become/component/swiper.dart';
import 'package:pacsun/view/task/widgets/cache_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';

class MonentDetail extends StatefulWidget {
  final Map<String, dynamic> data;
  const MonentDetail({super.key, required this.data});

  @override
  State<MonentDetail> createState() => _MonentDetailState();
}

class _MonentDetailState extends State<MonentDetail> {
  final PageController _pageController = PageController();
  final FamilyTextColor _whiteColor = FamilyTextColor.white;
  int currentPage = 0;

  @override
  Widget build(BuildContext context) {
    final bottomPadding = MediaQuery.of(context).padding.bottom;

    return Container(
      width: 375.w,
      decoration: BoxDecoration(
        color: AppColors.black,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10),
          topRight: Radius.circular(10),
        ),
      ),
      // padding: EdgeInsets.symmetric(horizontal: 37).r,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(height: 12.w),
          Row(
            children: [
              Spacer(),
              GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Container(
                  width: 24.w,
                  height: 24.h,
                  alignment: Alignment.center,
                  child: SvgPicture.asset(
                    'assets/icons/icon_close.svg',
                    width: 14.w,
                    height: 14.h,
                    color: Colors.white,
                  ),
                ),
              ),
              SizedBox(width: 9.w)
            ],
          ),
          SizedBox(height: 15.h),
          SizedBox(
            width: double.infinity,
            height: 400.h,
            child: PageView(
              controller: _pageController,
              onPageChanged: (value) {
                setState(() {
                  currentPage = value;
                });
              },
              children: [
                widget.data['url'],
                'assets/imgs/img_inspriation2.png',
                'assets/imgs/img_inspriation3.png',
                'assets/imgs/img_inspriation4.png',
              ].map((e) {
                return Padding(
                  padding: EdgeInsets.symmetric(horizontal: 37).r,
                  child: CacheNetworkImage(
                    imageUrl: e,
                    imageType: ImageType.asset,
                    width: 300,
                    height: 400,
                    borderRadius: 12.r,
                  ),
                );
              }).toList(),
            ),
          ),
          SizedBox(height: 20.h),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 37).r,
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: List.generate(4, (index) {
                    return GestureDetector(
                      onTap: () {
                        if (currentPage != index) {
                          _pageController.animateToPage(
                            index,
                            duration: Duration(milliseconds: 300),
                            curve: Curves.easeInOut,
                          );
                        }
                      },
                      child: Container(
                        margin: const EdgeInsets.symmetric(horizontal: 4),
                        width: currentPage == index ? 10.w : 4.w,
                        height: 4.h,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(2.5).r,
                          color: currentPage == index
                              ? Colors.white
                              : Color(0XFFD9D9D9).withAlpha(127),
                        ),
                      ),
                    );
                  }),
                ),
                SizedBox(height: 8.h),
                Text(
                  widget.data['text'],
                  // 'Sun, salt, and sisterhood—Hawaii days hit different 🌊🌞',
                  style: customTextStyle(
                    fontSize: 14,
                    color: _whiteColor,
                    height: 22 / 14,
                  ),
                  textAlign: TextAlign.left,
                ),
                SizedBox(height: 9.h),
                Row(
                  children: [
                    ProfileAvatar(
                      proFileUrl: widget.data['proFile'],
                      width: 24,
                      height: 24,
                    ),
                    SizedBox(width: 4.w),
                    Text(
                      'Michelle Bonita',
                      style: customTextStyle(
                        fontSize: 12,
                        fontWeight: 500,
                        color: _whiteColor,
                      ),
                    ),
                    Spacer(),
                    LikeContainer(
                      likes: widget.data['likes'],
                      isLiked: false,
                    )
                  ],
                ),
                SizedBox(height: 15.h),
                Container(
                  width: double.infinity,
                  padding: EdgeInsets.only(
                          top: 11, left: 14, right: 8, bottom: bottomPadding)
                      .r,
                  decoration: BoxDecoration(
                    color: Color(0XFF111111),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8),
                      topRight: Radius.circular(8),
                    ).r,
                  ),
                  child: Column(
                    spacing: 15.h,
                    children: [
                      ...(widget.data['comment'] as List<Map<String, dynamic>>)
                          .map((e) {
                        return Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            ProfileAvatar(
                              proFileUrl: e['proFile'] ?? '',
                              width: 24,
                              height: 24,
                            ),
                            SizedBox(width: 4.w),
                            Expanded(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    e['nickName'],
                                    style: customTextStyle(
                                        fontSize: 10,
                                        fontWeight: 500,
                                        color: _whiteColor,
                                        height: 15 / 10),
                                  ),
                                  Text(
                                    e['content'],
                                    style: customTextStyle(
                                      fontSize: 10,
                                      color: _whiteColor,
                                      opacity: 0.7,
                                      height: 15 / 10,
                                    ),
                                    maxLines: 2,
                                  ),
                                ],
                              ),
                            ),
                            LikeContainer(
                              isLiked: e['isLiked'],
                              likes: e['like'],
                              direction: Direction.vertical,
                              background: Colors.transparent,
                              mainAxisAlignment: MainAxisAlignment.start,
                            )
                          ],
                        );
                      }),
                    ],
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
